<template>
  <div class="article-manager">
    <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: 0 }">
      <div class="padding-add">
        <el-form ref="artFrom" :model="artFrom" label-width="80px" label-position="right" inline @submit.native.prevent>
          <el-form-item label="医生名称：" label-for="name">
            <el-input
                clearable
                placeholder="请输入医生名称/关键字/ID"
                v-model="artFrom.name"
                class="form_content_width"
            />
          </el-form-item>
          <el-form-item label="手机号：" label-for="phone">
            <el-input
                clearable
                placeholder="请输入手机号"
                v-model="artFrom.phone"
                class="form_content_width"
            />
          </el-form-item>
          <el-form-item label="状态：" label-for="status">
            <el-select
                v-model="artFrom.status"
                placeholder="请选择状态"
                clearable
                @change="userSearchs"
                class="form_content_width"
            >
              <el-option value="1" label="启用"></el-option>
              <el-option value="0" label="禁用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userSearchs">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16">
      <router-link v-auth="['medical-disease-index']" :to="$routeProStr + '/medical/disease_list'"
      ><el-button type="primary" class="mr14">病种管理</el-button></router-link
      >
      <el-button v-auth="['medical-doctor-add']" type="primary" class="bnt" @click="addDoctor">添加医生
      </el-button>
      <el-table
          ref="table"
          :data="tableList"
          class="ivu-mt mt14"
          v-loading="loading"
          highlight-current-row
          :row-key="getRowKey"
          @selection-change="handleSelectRow"
          empty-text="暂无数据"
      >
        <el-table-column type="expand" width="50" v-if="['1', '2'].includes(artFrom.type)">
          <template slot-scope="scope">
            <expandRow :row="scope.row"></expandRow>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="60" :reserve-selection="true"></el-table-column>
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医生名称" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医生头像" min-width="90">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="scope.row.headimgurl" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务门店" min-width="150">
          <template slot-scope="scope">
            <span v-for='v in scope.row.stores'>{{ v.name }},</span>
          </template>
        </el-table-column>
        <el-table-column label="服务病种" min-width="150">
          <template slot-scope="scope">
            <span v-for='v in scope.row.diseases'>{{ v.name }},</span>
          </template>
        </el-table-column>
        <el-table-column label="绑定医生" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.staff?.staff_name || "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="核销医生手机号" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.staff?.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已核销订单" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.hasStaffCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="待核销订单" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.waitStaffCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <el-switch
                class="defineSwitch"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.status"
                :value="scope.row.status"
                @change="changeSwitch(scope.row)"
                size="large"
                active-text="启用"
                inactive-text="禁用"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建人" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.admin.real_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" minWidth="100">
          <template slot-scope="scope">
            <a @click="editAppointment(scope.row)">管理预约日期</a>
            <el-divider direction="vertical"></el-divider>
            <a @click="edit(scope.row)">编辑</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
            v-if="total"
            :total="total"
            :page.sync="artFrom.page"
            :limit.sync="artFrom.limit"
            @pagination="getDataList"
        />
      </div>
    </el-card>

    <!-- 添加 编辑表单-->
    <edit-from ref="edits" :FromData="FromData" @submitFail="userSearchs"></edit-from>
  </div>
</template>

<script>
import {mapState} from 'vuex';

import {getDoctors, PostDoctorStatus, doctorCreateApi, doctorEditApi,} from '@/api/medical';
import editFrom from "_c/from/from.vue";

export default {
  name: 'product_doctorList',
  components: {editFrom},
  computed: {
    ...mapState('userLevel', ['categoryId']),
  },
  data() {
    return {
      template: false,
      modals: false,
      batchModal: false,
      labelShow: false,
      batchType: 1, // 批量设置类型
      FromData: null,
      batchFormData: {},
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      artFrom: {
        page: 1,
        limit: 15,
        name: '',
      },
      list: [],
      tableList: [],
      headeNum: [],
      loading: false,
      data: [],
      total: 0,
      attrTemplate: false,
      ids: [],
      goodsId: '',
      isDoctorBox: false,
      treeSelect: [],
      multipleSelection: [],
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    getRowKey(row) {
      return row.id;
    },
    //  选中某一行
    handleSelectRow(selection) {
      const uniqueArr = [];
      const ids = [];
      for (let i = 0; i < selection.length; i++) {
        const item = selection[i];
        if (!ids.includes(item.id)) {
          uniqueArr.push(item);
          ids.push(item.id);
        }
      }
      this.ids = ids;
      this.multipleSelection = uniqueArr;
    },
    pageChange(index) {
      this.artFrom.page = index;
      this.getDataList();
    },
    // 仓库列表；
    getDataList() {
      this.loading = true;
      this.artFrom.status = this.artFrom.status || '';
      getDoctors(this.artFrom)
          .then((res) => {
            let data = res.data;
            this.tableList = data.list;
            this.total = res.data.count;
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$message.error(res.msg);
          });
    },
    // 上下架
    changeSwitch(row) {
      PostDoctorStatus(row.id, row.status)
          .then((res) => {
            this.$message.success(res.msg);
            this.getDataList();
          })
          .catch((res) => {
            row.status = !row.status ? 1 : 0;
            this.$message.error(res.msg);
          });
    },
    // 编辑
    edit(row) {
      this.$modalForm(doctorEditApi(row.id)).then(() => this.getDataList());
    },
    // 管理预约时间
    editAppointment(row) {
      this.$router.push({ path: this.$routeProStr + '/medical/doctor/edit_appointment/' + row.id });
    },
    // 确认
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `product/doctor/${row.id}`,
        method: 'DELETE',
        ids: '',
        un: 1,
      };
      this.$modalSure(delfromData)
          .then((res) => {
            this.$message.success(res.msg);
            this.tableList.splice(num, 1);
            this.getDataList();
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
    },

    // 添加
    addDoctor() {
      this.$modalForm(doctorCreateApi()).then(() => this.getDataList());
    },

    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.getDataList();
    },
  },
};
</script>
<script setup>
</script>